<!DOCTYPE html>
<html>
<head>
    <title>提交订单</title>
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <include file="public@head" />
    <link href="__TMPL__/public/html_assets/css/seatcss.css" rel="stylesheet">
</head>

<body class="body-white">
<include file="public@nav" />

<!--<foreach name="data" item="vo">-->
    <!--<div style="border:1px solid red">-->
        <!--<p>{$vo.name}</p>-->
        <!--<p>{$vo.total_price}</p>-->
        <!--<a href="{:url('order/select_class',array('id'=>$vo.id))}">详情</a>-->
        <!--<a href="{:url('order/order_list',array('id'=>$vo.id))}">报名</a>-->
    <!--</div>-->
<!--</foreach>-->

<!--步骤 -->
<div class="step wrap">
    <ul>
        <li>1、填写订单</li>
        <li class="now">2、选择座位</li>
        <li>3、支付订单
            <i>&#xe612;</i>
        </li>
    </ul>
</div>
<!--步骤 -->

<!--订单 -->
<div class="order wrap" style="font-family:iconfont;">

    <!--标题 -->
    <!--<div class="order-column">-->
        <!--<h2>选择座位</h2>-->
    <!--</div>-->
    <!--标题 -->

    <!--选座位 -->
    <div class="order-seat" style="width:100%;">
        <!--黑板 -->
        <div class="blackboard"><img src="__TMPL__/public/html_assets/images/heiban.jpg" /></div>
        <!--黑板 -->
        <!--座位 -->
        <div id="seat-map">
            <!--<ul>-->
                <!--<li class="yes">-->
                    <!--<input type="checkbox" name="checkbox" value="checkbox" class="checkbox" id="seat01" checked="checked" disabled="disabled"/>-->
                    <!--<label for="seat01"><i>&#xe612;</i></label>-->
                <!--</li>-->
            <!--</ul>-->
        </div>

        <!--座位 -->
    </div>
    <div id="legend"  >

    </div>
    <div class="clear"></div>
    <!--选座位 -->
    <!--按钮 -->
    <form action="{:url('order/order/select_seat')}" method="post" class="js-ajax-form" id="form">
        <input type="hidden" name="student_seat" value="" id="student_seat">
        <input type="hidden" name="classes_id" value="{$id}">
        <input type="hidden" name="student_id" value="{$student_id}">

        <div class="order-btn">
            <button type="submit" class="js-ajax-submit" id="button">下一步</button>
        </div>
    </form>

    <!--按钮 -->

</div>
<!--订单 -->
<include file="public@scripts"/>
<include file="public@footer"/>
<script src="__STATIC__/js/jquery.seat-charts.min.js"></script>
<script>
    $(document).ready(function () {
        set_seat();
        $('.seatCharts-seat').html('&#xe612;');
        set_column();

//   设置列数为字母
        function set_column() {
            var obj=$('.seatCharts-header>.seatCharts-cell:not(:first)');
            var length=obj.length;
            for (var i=0;i<length;i++){
                if(obj[i].innerHTML>26){
                    console.log('超出最大列数Z(26)');
                    return false;
                }else{
                    obj[i].innerHTML=String.fromCharCode(parseInt(obj[i].innerHTML)+64);
                }
            }
        }

        function set_seat() {
            var row = {$seat_data[0]['rows']};
            var column = {$seat_data[0]['cols']};
            var aisle = "{$seat_data[0]['aisle']}";
                if(aisle) aisle=aisle.split(',');
            var vip = "{$seat_data[0]['vip']}";
                if(vip) vip=vip.split(',');
            var student_seat = "{$seat_data[0]['student_seat']}";
                if(student_seat) student_seat=student_seat.split(',');
            var reserved_seats = "{$seat_data[0]['reserved_seats']}";
                if(reserved_seats) reserved_seats=reserved_seats.split(',');
            var new_map = [];
            if (row && column) {
                //根据行列初步生成座位表的map
                for (var i = 0; i < row; i++) {
                    new_map[i] = '';
                    for (var j = 0; j < column; j++) {
                        new_map[i] += 'a';
                    }
                }
            }

            sc = $('#seat-map').seatCharts({
                map: new_map,
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        return column;
                    }
                },
                legend: { //定义图例
                    node: $('#legend'),
                    items: [
                        ['a', 'available', '可选座位'],
                        ['a', 'selected', '已选座位'],
                        ['a', 'unavailable', '已售座位'],
                        ['a', 'parentseats', '家长座位']
                    ]
                },
                click: function () {
                    if (this.status() == 'available') {
                        sc.find('selected').status('available');
                        $("#student_seat").val(this.settings.id);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        $("#student_seat").val('');
                        return 'available';
                    } else {
                        return this.style();
                    }
                }
            });

            if(aisle){
                sc.get(aisle).status('aisles');
            }
            if(vip){
                sc.get(vip).status('parentseats');
            }
            if(student_seat){
                sc.get(student_seat).status('unavailable');
            }
            if(reserved_seats){
                sc.get(reserved_seats).status('unavailable');
            }

        }

    })

    $('#button').click(function () {

        $("#student_seat").val(sc.find('selected').seatIds[0]);
        if(sc.find('selected').seatIds[0]=='')
        {
            return false;
        }
    })
</script>
</body>
</html>